<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3 模板</title>
</head>

<body>
        <!-- 一个案例,根据商品数量修改总价 -->
    <div id="app">
        <table width="100%" style="text-align: center;">
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>商品数量</th>
                <th>合计</th>
            </tr>
            <tr>
                <td>1</td>
                <td>小米10</td>
                <td>{{price}}</td>
                <td>
                    <button @click="subtract">-</button>
                    {{quantity}}
                    <button @click="add">+</button>
                </td>
                <td>{{totalPrice}}</td>
            </tr>
        </table>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
     Vue.createApp({
         data(){
           return{
               price:3000,
               quantity:1
           }
         },
         methods:{
               add(){
                this.quantity++;
               },
               subtract(){
                this.quantity--;
               }
         },
         computed:{
            totalPrice(){
                return this.price*this.quantity;
            }
        }
       }).mount('#app')
    </script>
</body>

</html>
